<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML5 事件</title>
  </head>
  <body>
    <div id="myBtn">右键点击唤起自定义菜单</div>
    <ul
      id="customerMenu"
      style="
        position: absolute;
        visibility: hidden;
        background-color: blueviolet;
      "
    >
      <li><a href="https://www.baidu.com">百度一下</a></li>
      <li><a href="https://www.sogu.com">搜狗</a></li>
      <li><a href="https://www.360.com">360</a></li>
      <li><a href="https://www.bilibili.com/">BiliBili</a></li>
    </ul>
  </body>
  <script>
    //1. contextmenu 事件
    window.addEventListener('load', () => {
      const myBtn = document.getElementById('myBtn');
      myBtn.addEventListener('contextmenu', (event) => {
        event.preventDefault(); //禁止默认右键菜单被唤起
        const customerMenu = document.getElementById('customerMenu'); //展示自定义菜单。
        customerMenu.style.left = event.clientX + 'px';
        customerMenu.style.top = event.clientY + 'px';
        customerMenu.style.visibility = 'visible';
      });
      document.addEventListener('click', () => {
        const customerMenu = document.getElementById('customerMenu'); //关闭自定义菜单。
        customerMenu.style.visibility = 'hidden';
      });
    });
    window.addEventListener('beforeunload', (event) => {
      let message = "I'm really going to miss you if you go.";
      event.returnValue = message;
      return message;
    });
    (function () {
      let showCount = 0;
      window.addEventListener('load', () => {
        console.log('Load fired');
      });
      window.addEventListener('pageshow', () => {
        // pageshow，其会在页面显示时触发，无论是否来自往返缓存。
        showCount++;
        console.log(
          `Show has been fired ${showCount} times.`,
          `Persisted? ${event.persisted}`
        );
      });
      window.addEventListener('pagehide', (event) => {
        //这个事件会在页面从浏览器中卸载后，在 unload 事件之前触发。
        showCount++;
        console.log(
          `Hiding has been fired ${showCount} times. `,
          `Persisted? ${event.persisted}`
        );
      });
    })();
  </script>
</html>
